<template>
  <div class="deposit"
       v-loading="loading"
       element-loading-text="拼命生成订单中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    
    <div>
    <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  style="display:flex;justify-content:center">
  <!-- <el-menu-item index="1">联系客服</el-menu-item> -->
  <el-menu-item><img src="../img/logo.png" @click="gotoindex()"></el-menu-item>
  <el-menu-item @click="gotoindex()">首页</el-menu-item>
  <el-menu-item index="4" @click="car"><i class="el-icon-shopping-cart-2" ></i>购物车</el-menu-item>
  <el-menu-item index="5" @click="pay">充值中心</el-menu-item>
  <el-menu-item index="6" @click="order">我的订单</el-menu-item>
  <el-menu-item index="7" @click="address">收货地址</el-menu-item>
  <el-menu-item index="8" @click="dposistdetil">个人充值查询</el-menu-item>
  <el-menu-item index="9" @click="myShop">我的</el-menu-item>
</el-menu>
</div>
    <div style="display:flex;justify-content:center;margin:200px">
      <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>用户余额充值</span>

  </div>
  <div>
    <el-form>
      <el-form-item label="请选择您想充值的金额" prop="resource">
    <el-radio-group v-model="resource">
      <el-radio label="100"></el-radio>
      <el-radio label="200"></el-radio>
      <el-radio label="300"></el-radio>
      <el-radio label="400"></el-radio>
      <el-radio label="500"></el-radio>
    </el-radio-group>
  </el-form-item>
  
      <el-form-item label="或者选择您想要直接付款的方式" prop="resource1">
    <el-radio-group v-model="resource1">
      <el-radio label="支付宝"></el-radio>
      
      
    </el-radio-group>
  </el-form-item>
  <el-form-item style="display:flex;justify-content:center"><el-button type="primary" style="width:200px;" @click="addBalance">充值</el-button></el-form-item>
    </el-form>
  </div>
</el-card></div>
    </div>
</template>

<script>

export default {
  
  data(){
    return{
      activeIndex2: '1',
      resource: '',
      resource1:"",
      userId:'',
      loading: false,
    }
  },
      mounted(){
         let jsonUser = sessionStorage.getItem("user")
         console.log(jsonUser)
         let jsonObj=JSON.parse(jsonUser)
         this.userId = jsonObj.userId
     },
  methods:{
    gotoindex(){
        this.$router.push("/ShopIndex")
      },
      order(){this.$router.push('/UserOrder')
      },
       address(){this.$router.push('getGoodsAddress')
      },
      pay(){this.$router.push('/deposit')
      },
      car(){
        this.$router.push('/ShopCar')
      },
      dposistdetil(){
        this.$router.push('/depositDetail')
      },
      gotoGoodsDetail(){
        
        this.$router.push('/ShopIndexDetail')
      },
      addShopCar(){
        this.$router.push('/ShopCar')
      },
      myShop(){
        this.$router.push('/user')
      },
    addBalance(){
      let jsonUser=sessionStorage.getItem("userData")
      let data=JSON.parse(jsonUser)
      if (data.userId==0){
        console.log("bbb")
        this.$message.warning("请先补全信息")
        this.$router.push("/addUserInfo")
      }else{
      let m=this.resource*100
      console.log(m)
      this.$axios.get("/api/save/addBalanceDetail/" + m +  "/" + this.userId).then(
        res=>{
          this.loading=true
          alert("充值中")
          console.log(res.data)
          this.getStatus(res.data)
        }
      )
      // router.back()
        }
    },
    getStatus(id){
      this.$axios.get("/api/save/getStatus/" + id).then(r=>{
        if(r.data=="中"){
          this.$notify({
            title: '充值中',
            message: "充值中",
          })
          this.getStatus(id)
        }else  if(r.data=="成功"){
          this.$notify({
            title: '充值成功',
            message: "充值成功",
            type: 'success'
          })
          this.loading=false
          this.$router.go(-1)
        }else {
          this.$notify({
            title: '充值失败',
            message: "充值失败，原因："+r.data,
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style>
 
.deposit{
  background-image: url("../img/background.jpg");
  height: 1000px;
}
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

</style>